import ReactDOM from 'react-dom';
import { Pie, PieConfig } from '@ant-design/plots';

const CustomPie = ({
  quantity,
  current,
  type = 'success'
}: {
  [key: string]: any,
  type?: 'success' | 'error'
}) => {
  const config: PieConfig = {
    data: [
      { type: '失败数', value: quantity - current },
      { type: '成功数', value: current },
    ],
    angleField: 'value',
    colorField: 'type',
    // paddingRight: 80,
    // innerRadius: 0.6,
    label: false,
    legend: false,
    // annotations: [
    //   {
    //     type: 'text',
    //     style: {
    //       text: '',
    //       x: '50%',
    //       y: '50%',
    //       textAlign: 'center',
    //       fontSize: 40,
    //       fontStyle: 'bold',
    //     },
    //   },
    // ],
    style: {
      // padding: 10,
      fill: ({ type: pieType }: any) => {
        // if (type === 'success') {
        //   if (pieType === '失败数') {
        //     return 'p(a)https://gw.alipayobjects.com/zos/antfincdn/Ye2DqRx%2627/pie-wenli2.png';
        //   }
        //   return 'p(a)https://gw.alipayobjects.com/zos/antfincdn/FioHMFgIld/pie-wenli1.png';
        // }
        // if (pieType === '失败数') {
        //   return 'p(a)https://gw.alipayobjects.com/zos/antfincdn/Ye2DqRx%2627/pie-wenli2.png';
        // }
        // return 'p(a)https://gw.alipayobjects.com/zos/antfincdn/FioHMFgIld/pie-wenli1.png';

        if (pieType === '失败数') {
          return 'p(a)https://gw.alipayobjects.com/zos/antfincdn/Ye2DqRx%2627/pie-wenli2.png';
        }
        return 'p(a)https://gw.alipayobjects.com/zos/antfincdn/FioHMFgIld/pie-wenli1.png';
      },
    },
    tooltip: false,
    // tooltip: {
    //   items: [{ channel: 'y', name: 'type' }],
    // },
  }
  return <Pie width={80} height={80} padding={0} margin={0}  {...config} />;
};

export default CustomPie
